<!--
*@Author: QWP
*@Description: 权限管理
*@Date: 2024-07-16 09:10:14
-->
<template>
  <a-layout class="f-h-100">
    <a-layout-content class="s-bg-white f-padding-16">
      <a-row align="middle">
        <span style="font-size: 18px;color: #333333;">权限调整</span>
        <span style="margin-left: 20px; font-size: 14px;color: #999999;">可选择人员进行相关权限调整</span>
      </a-row>
      <u-busi-card title="选择对象">
        <a-row align="middle">
          <div class="f-flex-row"
            style="width: 280px; height: 128px;border: 1px solid #D9D9D9; border-radius: 8px; align-items: center; justify-content: center"
            @click="showSel = true">
            <a-space>
              <div class="f-flex-column"
                style="width: 96px;
                  height: 96px;
                  background: #1890FF; border-radius: 50%; justify-content: center; align-items: center; color: #fff;" >
                <PlusOutlined style="font-size: 20px;" />
                <div>添加对象</div>
              </div>
            </a-space>
            <a-space direction="vertical" class="f-margin-l20">
              <div>转移对象</div>
              <div>运维</div>
            </a-space>
          </div>
          <SwapOutlined style="margin: 0 30px; font-size: 50px; color: #1890FF"/>
          <div class="f-flex-row"
             style="width: 280px; height: 128px;border: 1px solid #D9D9D9; border-radius: 8px; align-items: center; justify-content: center">
            <a-space>
              <div class="f-flex-column"
                style="width: 96px;
                  height: 96px;
                  background: #1890FF; border-radius: 50%; justify-content: center; align-items: center; color: #fff;" >
                <div>丁艳玲</div>
              </div>
            </a-space>
            <a-space direction="vertical" class="f-margin-l20">
              <div>接受对象</div>
              <div>管理员</div>
            </a-space>
          </div>
          <u-icon-button class="f-margin-l20">确认专业</u-icon-button>
        </a-row>

        <a-row class="f-margin-t10 u-checkbox-jd">
          <a-checkbox>
            <span style="font-size: 18px;color: #333333;">流程节点操作者</span>
          </a-checkbox>
          <a-checkbox-group :options="jdOptions" v-model:value="jdOptions"></a-checkbox-group>
        </a-row>

        <a-row class="f-margin-t20 u-checkbox-jd">
          <a-checkbox>
            <span style="font-size: 18px;color: #333333;">待办事宜</span>
          </a-checkbox>
        </a-row>
        <a-list :grid="{ gutter: [10, 10], column: 7 }" :data-source="toDoList">
          <template #renderItem="{ item }">
            <a-list-item style="padding: 0;">
              <a-row align="middle" class="f-h-100" 
                style="height: 96px; padding: 0 10px; border-radius: 16px;
                border: 1px solid #D9D9D9;">
                <a-space direction="vertical">
                  <a-checkbox>{{ item.title }}</a-checkbox>
                  <span style="padding-left: 26px;font-size: 14px;color: #666666;">共计 <span>{{ item.number }}</span> 条</span>

                </a-space>
              </a-row>
            </a-list-item>
          </template>
        </a-list>

        <a-row class="f-margin-t20 u-checkbox-jd">
          <a-checkbox>
            <span style="font-size: 18px;color: #333333;">已办事宜</span>
          </a-checkbox>
        </a-row>
        <a-list :grid="{ gutter: 10, column: 7 }" :data-source="doList">
          <template #renderItem="{ item }">
            <a-list-item style="padding: 0;">
              <a-row align="middle" class="f-h-100"
                style="width: 100%; height: 96px; padding: 0 10px; border-radius: 16px;
                border: 1px solid #D9D9D9;">
                <a-space direction="vertical">
                  <a-checkbox>{{ item.title }}</a-checkbox>
                  <span style="padding-left: 26px;font-size: 14px;color: #666666;">共计 <span>{{ item.number }}</span> 条</span>
                </a-space>
              </a-row>
            </a-list-item>
          </template>
        </a-list>
      </u-busi-card>
    </a-layout-content>
  </a-layout>

  <SelUser v-model:open="showSel"
    width="50%"
    title="人员选择"/>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted } from 'vue' 

import { useRoute, useRouter } from 'vue-router'
import SelUser from './SelUser.vue'

let jdOptions = reactive<any[]>([]);
let toDoList = reactive<any[]>([]);
let doList = reactive<any[]>([]);

let showSel = ref<boolean>(false)

onMounted(() => {
  for(let i = 0; i < 20; i++) {
    jdOptions.push('流程节点操作' + (i + 1))
  }
  for(let i = 1; i <= 14; i++) {
    toDoList.push({ title: `待办事宜类型${i}`, number: i })
  }
  for(let i = 1; i <= 7; i++) {
    doList.push({ title: `已办事宜类型${i}`, number: i })
  }
})

</script>

<style lang='scss'>
.u-checkbox-jd {
  .ant-checkbox-group {
    .ant-checkbox-wrapper {
      width: 140px;
      padding: 6px 4px;
      font-size: 14px;
      color: #333333;
    }
  }
}
</style>